import React from 'react'
import Input from '../../components/input'
import Select from '../../components/select'
import clsx from 'clsx'
import { operatorOptions } from './utils' 

function ConditionProperties (props) {
  const {
    theme,
    rule
  } = props
  return (
    <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
      <div className="w-full">
        <label className={clsx(`text-${theme}-500`)}>Fact: </label>
        <Input defaultValue={rule.fact} />
      </div>
      <div className="w-full">
        <label className={clsx(`text-${theme}-500`)}>Operator: </label>
        <Select options={operatorOptions} defaultValue={rule.operator} />
      </div>
      <div className="w-full">
        <label className={clsx(`text-${theme}-500`)}>Value: </label>
        <Input defaultValue={rule.value} />
      </div>
    </div>
  )
}

export default ConditionProperties